<template>
  <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" @submit.native="onFormSubmit">
    <el-form label-width="90px">
      <el-form-item label="目录名称">
        <el-input v-model="form.label" :disabled="isDisabled" size="small"></el-input>
      </el-form-item>
      <el-upload v-if="type === 4" ref="upload" multiple class="upload-demo" action="" auto-upload="false" :http-request="upload" :on-change="handleChange" :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
</el-dialog>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import Axios from '../../utils/axios';
import config from '../../utils/config';
@Component({})
export default class Panel extends Vue {

  //面板是否展示
  @Prop(Boolean) show!: Boolean;

  @Prop({ type: Object, default: () => {} }) form!: any;

  @Prop(Number) type!: number;

  fileList:any = []

  get dialogVisible(){
    return this.show;
  }
  set dialogVisible(val){
    if(!val){
      this.fileList = [];
      this.form.label = '';
    }
    this.$emit('update:show',val);
  }

  get isDisabled(){
    return this.type === 4
  }

  //是否可上传
  // get canUpload(){
  //   const { children } = this.form;
  //   if(children && this.form.mainId !== 1 && (!children.length || children[0].type === 2)){
  //     return false
  //   }
  //   return true;
  // }

  handleChange(file, fileList){
    this.fileList = fileList;
  }

  upload(){
    return;
  }

  onFormSubmit (e) {
    e.preventDefault()
    this.confirm()
  }

  onSubmit(){
    const formData = new FormData();
    this.fileList.forEach(file => {
      formData.append('files', file.raw);
    })
    formData.append('mainId',this.form.mainId)
    Axios({
      url:`${config.apiHost}/file/upload`,
      method:'post',
      data:formData
    }).then(res => {
      if(res.code === 200){
        this.$message.success('上传成功');
        this.close();
      }else{
        this.$message.error(res.message);
      }
    }).catch(err => {
      this.$message.error(err.message);
    })
  }

  rename(data){
    Axios({
      url:`${config.apiHost}/catalogue/rename`,
      method:'post',
      data
    }).then(res => {
      this.$message.success('更新成功');
      this.close();
    })
  }

  addname(data){
    Axios({
      url:`${config.apiHost}/catalogue/add`,
      method:'post',
      data
    }).then(res => {
      this.$message.success('新增成功');
      this.close();
    })
  }

  confirm(){
    //上传
    if(this.type === 4){
      this.onSubmit();
    }
    //编辑
    if(this.type === 2){
      this.rename({mainId:this.form.mainId,label:this.form.label});
    }
    //新建
    if(this.type === 1){
      this.addname({parent:this.form.mainId,type:this.form.type,label:this.form.label});
    }

  }

  close(){
    this.dialogVisible = false;
    this.$emit('callback',{},-1)
  }
}
</script>

<style lang="less" scoped>
    .upload-demo{
      text-align: left;
      padding-left:100px;
    }
    .input-tr{
      display:flex;
      margin-bottom:10px;
      span{
        display:block;
        width:120px;
        line-height:28px;
      }
    }
</style>

